<html>
  <head>
    <title>Comparing a couple of subjectivity images</title>
    <style>
body { margin: 0; padding: 0; background: #ccc; }
.innerFrame { margin: auto auto; border: 2px inset #333; padding: 0; overflow: hidden; width: 100%; height: 100%; }
.innerFrame img { width: 100px; height: 100px; }
.zoomButtons { padding: 2px 5px; background: white; width: 150px; text-align: center; }
#page { width: 100%; height: 100%; }
#header { width: 100%; height: 55px; border-top: 1px solid grey; }
#headerfloat { position: absolute; margin: 0; padding: 20px 0 0 0; top:0; left: 0; }
#left { width: 45%; background: #808080; padding: 20px; }
#gutter { width: 10%; padding: 20px; background: #ccc; }
#right { width: 45%; background: #808080; padding: 20px; }
.wide { width: 100%; margin: 10px 0; }
.narrow { width: 48%; margin: 10px 0; }
.hiddenBtn { display: none; }
    </style>
    <script>
    window.left_data =  { 'width': <%=@left.width%>,  'height': <%=@left.height%>,  'aspect': <%=@left.aspect%> }
    window.right_data = { 'width': <%=@right.width%>, 'height': <%=@right.height%>, 'aspect': <%=@right.aspect%> }
    </script>
    <script src='/javascripts/prototype.js'></script>
    <script src='/javascripts/scriptaculous.js'></script>
    <script src='/javascripts/image_view_helper.js'></script>
  </head>
  <body onmousemove='drag(event)' onmouseup='dragStop()'>
<!--    <div id='marker' style='position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: red; '></div> -->
    <form id='vote' name='vote' action='/votes/new' method='post'>
      <input type='hidden' name='search_compare' value='<%=h @search_compare%>' />
      <input type='hidden' name='left_id' value='<%=h @left.id%>' />
      <input type='hidden' name='right_id' value='<%=h @right.id%>' />
      <table cellspacing='0' id='page'>
        <tr>
          <td id='header' colspan='3' align='center'>
            <div id='headerfloat'>
              Comparison for tag
              <%= text_field_with_auto_complete :tag, :tagname, {:autocomplete => "off"},
                  {:url => "/tags/autocomplete", :method => "get", :with => "'tagname_fragment='+ element.value"} %>
              --
              <input type='checkbox' name='anchor' value='1' /> Anchor these competitors
            </div>
            <button class='hiddenBtn' name='btn' value='invalid'></button>
          </td>
          <!-- old declarative tagname <%=h @tag.tagname%> -->
        </tr>
        <tr>
          <td id='left' valign='middle' align='center'>
            <div class='innerFrame' id='leftFrame'><img src='/image_facts/show_raw/<%=@left.id%>' id='leftImg'
                onmousedown='dragStart("left", event)'></div>
          </td>
          <td id='gutter' align='center' style='position: relative; '>
            <div><button class='wide' name='btn' value='PP'>Both images represent, but I can't decide which one is better</button></div>
            <div>
              <button class='narrow' name='btn' value='PN'>&lt;--<br>Left<br>&lt;--</button>
              <button class='narrow' name='btn' value='NP'>--&gt;<br>Right<br>--&gt;</button>
            </div>
            <div><button class='wide' name='btn' value='NN'>Neither image represents.</button></div>
          </td>
          <td id='right' valign='middle' align='center'>
            <div class='innerFrame' id='rightFrame'><img src='/image_facts/show_raw/<%=@right.id%>' id='rightImg'
                onmousedown='dragStart("right", event)'></div>
          </td>
        </tr>
      </table>
    </form>
    <script> init(); </script>
  </body>
</html>